<template>
    <div class="dialog-box">
        <el-dialog v-model="visible" top="80px" draggable overflow :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="header-box">
                    <div :id="titleId" :class="titleClass">券核销</div>
                </div>
            </template>
            <div class="content-box">
                <div class="content-left-box">
                    <div class="action">
                        <div class="action-item" v-for="(v, k) in tabBtnList" :key="k" @click="handleAction(v, k)"
                            :class="{ active: form.actionActive == v.value, none: v.value == '', disabled: v.isCanUse == '0' }">
                            {{ v.value }}
                        </div>
                    </div>
                    <el-form class="form-box" ref="formRef" :model="form" label-width="auto" size="large"
                        @submit.native.prevent>
                        <el-row>
                            <el-col :span="24">
                                <div style="display: flex;justify-content: space-between;">
                                    <el-form-item label="兑换券码：" prop="salaAmt">
                                    <el-input v-model="form.code" placeholder="点击扫描兑换码"
                                        @keyup.enter.native="searchTicket" />
                                    <img class="qrcode-img"
                                        src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/vip/qrcode.png" alt="">
                                </el-form-item>
                                <div class="sumibt-kxj" @click="searchTicket">确认</div>
                                </div>
                             
                            </el-col>
                            <el-col :span="24" style="display: none;">
                                <el-form-item label="兑换券码：" prop="salaAmt">
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>

                <div class="content-right-box">
                    <h3>核销券信息</h3>
                    <div class="use-ticket-box">
                        <template v-if="ticketInfo.TicketName">
                            <div class="ticket-name">{{ ticketInfo.TicketName }}</div>
                            <div class="ticket-info">
                                <div class="ticket-label">有效日期：</div>
                                <div class="ticket-value">{{ ticketInfo.StartData }} - {{ ticketInfo.EndData }}</div>
                            </div>

                            <div class="ticket-info">
                                <div class="ticket-label">可使用时段：</div>
                                <div class="ticket-value">{{ ticketInfo.TimeStr ? ticketInfo.TimeStr : "无限制" }}</div>
                            </div>

                            <div class="ticket-info">
                                <div class="ticket-label">使用条件：</div>
                                <div class="ticket-value" v-if="ticketInfo.UseCondition == '1'">每个会员可以使用{{
                                    ticketInfo.MemberUseNum }}张</div>
                                <div class="ticket-value" v-else-if="ticketInfo.UseCondition == '2'">每个桌台可以使用{{
                                    ticketInfo.RoomUseNum }}张</div>
                                <div class="ticket-value" v-else-if="ticketInfo.UseCondition == '0'">无限制</div>
                            </div>

                            <div class="ticket-info">
                                <div class="ticket-label">商品信息：</div>
                                <div class="ticket-value">
                                    <div class="ware">{{ ticketInfo.GoodsName }}</div>
                                </div>
                            </div>
                            <div class="ticket-info">
                                <div class="ticket-label">使用状态：</div>
                                <div class="ticket-value">
                                    <div class="ware">{{ ticketInfo.TicketStateName }}</div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            请扫描券码
                        </template>
                    </div>
                </div>
            </div>


            <div class="footer-box">
                <el-button class="cancel" :loading="loading" @click="handleCancel">取消</el-button>
                <el-button class="submit" :loading="loading" v-show="form.actionActive == '兑换券'" @click="handleSubmit">确认核销</el-button>
                <!-- <el-button class="submit" :loading="loading" v-show="form.actionActive != '兑换券'" @click="forceHandle">强制核销</el-button> -->
            </div>
        </el-dialog>
        <ComboSelect v-if="packGoodsShow" v-model="packGoodsShow" :modalItemData="modalItemData" :toolPackDetail="PackDetail" @cancel="packGoodsShow = false" @confirm="packAllSub"/>
        <el-dialog v-model="comSelectShow" style="width: 30vw">
            <div class="popup-block" >
            <div class="popup-title">套餐选择</div>
            <div class="popup-block-main">
            <div class="main-item" :class="comSelectActive == k ? 'select':'' " v-for="(v,k) in comSelectList" :key="k" @click="selectCom(k)">
                {{ v.goodsName }}
            </div>
            </div>
            <div class="popup-block-footer">
                <z-button-group class="button-group">
                    <el-button class="cancel" @click="comSelectShow = false">取消</el-button>
                    <el-button class="submit"  @click="comSelectComfirm">确定</el-button>
                </z-button-group>
            </div>
            </div>
        </el-dialog>

        <el-dialog v-model="showForceHandle" class="force-dialog"  style="width: 30vw;margin-top: 10vw;">
            <div class="popup-block" >
            <div class="popup-title">提示</div>
            <div class="popup-block-handle">
                您确定要强制核销吗？
            </div>
            <div class="popup-block-footer">
                <z-button-group class="button-group">
                    <el-button class="cancel" @click="showForceHandle = false">取消</el-button>
                    <el-button class="submit" :class="handTime <= 0 ? '' : 'canot'"   @click="confirmForce">确定<div v-if="handTime > 0">({{ handTime }})</div></el-button>
                </z-button-group>
            </div>
            </div>
        </el-dialog>
    
    </div>
</template>

<script setup>

import dayjs from "dayjs"
import Api from '@/api'
import ls from '@/lib/ls'
import useGoodsStore from '@/store/goods'
import { getLocalIPv4 } from "@/utils/getip.js";
import ComboSelect from '@/views/components/ComboSelect.vue'

const goodsStore = useGoodsStore()
const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    },
})

const visible = toRef(props, 'visible')
const emit = defineEmits(['emitCancel', 'emitSubmit'])

const ip = ref("");
getLocalIPv4().then((ipAddress) => {
    // 在这里处理获取到的 IP 地址
    ip.value = ipAddress;
    console.log("IP 地址:", ip.value);
}).catch((error) => {
    console.error("发生错误:", error);
    // 在这里处理错误情况
});

const tabBtnList = ref([
    { value: '兑换券', isCanUse: '1' },
    { value: '美团券', isCanUse: '1' },
    { value: '抖音券', isCanUse: '1' },
])
// 切换兑换券
const handleAction = (v, k) => {
    if (v.isCanUse == '0') return
    form.value.actionActive = v.value
    console.log(form.value.actionActive);
    
}

const form = ref({
    actionActive: '兑换券'
})
const comSelectActive = ref(0) // 选中的套餐
const selectCom = (e)=>{ // 选中套餐
  comSelectActive.value = e
}
const comSelectComfirm = ()=>{ // 选中套餐确认
  const res = comSelectList.value[comSelectActive.value]
  console.log(res);
  
  packModalShow(res)
}
const ticketInfo = ref({})
console.log('ticketInfo :>> ', ticketInfo);
// 查询优惠券信息
const searchTicket = (params) => {
    if (!form.value.code){ 
        ElNotification({
            title: '提示',
            message: '请输入券码',
            type: 'warning',
        })
        return
    }
    switch (form.value.actionActive) {
        case '兑换券':
            let data = {
                memberTicketCode: form.value.code
            }
             Api.Common.PcObjProcess.Do({ "functionName": "GetGoodsTicket", "contentData": data })
                .then(res => {
                    console.log('查询优惠券信息res :>> ', res);
                    ticketInfo.value = res
                    // if(res.itemType == '1'){
                    //     ticketInfo.value = res
                    // }else{
                    //     let obj = {
                    //         list:[res]
                    //     }
                    //     findComb(obj)
                    // }
                    let obj = {
                            list:[res]
                    }
                    findComb(obj,'duihuang')
                   
                   
            })
            break;
    
        case '抖音券':
            let dydata = {
                tiktopCode: form.value.code
            }
             Api.Common.PcObjProcess.Do({ "functionName": "WriteOffTicketInfo", "contentData": dydata })
                .then(res => {
                    console.log('查询优惠券信息res :>> ', res);
                    // ticketInfo.value = res
                    findComb(res)
            })
            break;
        case '美团券':
            let mtdata = {
                receiptCode: form.value.code
            }
            Api.Common.PcObjProcess.Do({ "functionName": "MtWriteOffTicketInfo", "contentData": mtdata })
            .then(res => {
                console.log('查询优惠券信息res :>> ', res);
                // ticketInfo.value = res
                findComb(res)
                
            })
            break;
    }
}

const findComb = (res,type)=>{
    console.log(res,type);
    
    let result = ''
    if(type == 'duihuang'){ // 兑换券单品套餐不限
        result = goodsStore.goodsList.filter(goods => 
            res.list.some(item => item.GoodsCode === goods.goodsCode)
        );
    }else{ // 美团、抖音必选套餐
        result = goodsStore.goodsList.filter(goods => 
            goods.type === '2' && 
            res.list.some(item => item.GoodsCode === goods.goodsCode)
        );
    }
    
    console.log(goodsStore.goodsList);
    
    console.log(result); // 输出符合条件的商品数组
    if(result && result.length == 1){
        console.log(result[0].type);
        
        if(result[0].type == '1'){ // 如果是单品直接显示
            ticketInfo.value = res.list[0]
        }else{
            comSelectList.value = result  // 赋值套餐（如果可选套餐就一个，默认打开此套餐）
            packModalShow(result[0]) // 处理套餐
        }
        
    }else if(result && result.length > 1){
        comSelectList.value = result  // 赋值套餐（如果可选套餐有多个，挑选套餐）
        comSelectShow.value = true
    }else{
        ElNotification({
            title: '提示',
            message: '暂无商品,请确认商品列表是否包含此商品',
            type: 'error',
        })
    }
}


// 确认
let loading = ref(false)
const handleSubmit = (params) => {
    console.log(ticketInfo.value);
    console.log(form.value.code);
    if(!form.value.code){
        ElNotification({
            title: '提示',
            message: '请输入券码',
            type: 'warning',
        })
        return
    }
    if(ticketInfo.value.TicketStateName == '已使用'){
        ElNotification({
            title: '提示',
            message: '该券已使用',
            type: 'warning',
        })
        return
    }
    console.log(form)
    console.log(form.value.actionActive);

    if(isForce.value){ // 强制核销
        isForce.value = false // 清除标记 防止下一次正常核销被标记为强制
        switch (form.value.actionActive) {
            case '兑换券':
                let data = {
                    memberTicketCode: form.value.code,
                    consumeCode: ls.get('TABLE_INFO').consumeCode,
                    memberCarCode: ticketInfo.value.MemberCarCode,
                    detail:comDetail.value,
                    roomCode:ls.get('TABLE_INFO').roomCode,
                    ip: ip.value,
                }
                loading.value = true
                Api.Common.PcObjProcess.Do({ "functionName": "UseGoodsTicket", "contentData": data })
                    .then(res => {
                        console.log('使用优惠券 res :>> ', res);
                        loading.value = false
                        ElNotification({
                            title: '提示',
                            message: '使用成功',
                            type: 'success',
                        })
                        emit('emitSubmit', 'cancel')
                        comFlag.value = false
                    })
                    .catch(() => {
                        loading.value = false
                        comFlag.value = false
                    })
                break;
        
            case '抖音券':
                let query = {
                    tiktopCode:form.value.code,
                    consumeCode:ls.get('TABLE_INFO').consumeCode,
                    roomCode:ls.get('TABLE_INFO').roomCode,
                    detail:comDetail.value,
                    "ip": ip.value
                }
                loading.value = true
                console.log(query);
                
                Api.Common.PcObjProcess.Do({ "functionName": "ForceWriteOffTicket", "contentData": query })
                    .then(res => {
                        console.log('查询优惠券信息res :>> ', res);
                        // ticketInfo.value = res
                        ElNotification({
                            title: '提示',
                            message: '使用成功',
                            type: 'success',
                        })
                        emit('emitSubmit', 'cancel')
                        loading.value = false
                        comFlag.value = false
                    })
                    .catch(err=>{
                        loading.value = false
                        comFlag.value = false
                    })
                break;

            case '美团券':
            let mtquery = {
                receiptCode:form.value.code,
                consumeCode:ls.get('TABLE_INFO').consumeCode,
                roomCode:ls.get('TABLE_INFO').roomCode,
                detail:comDetail.value,
                "ip": ip.value
            }
            loading.value = true
            console.log(mtquery);
            
            Api.Common.PcObjProcess.Do({ "functionName": "ForceMtWriteOffTicket", "contentData": mtquery })
                .then(res => {
                    console.log('查询优惠券信息res :>> ', res);
                    // ticketInfo.value = res
                    ElNotification({
                        title: '提示',
                        message: '使用成功',
                        type: 'success',
                    })
                    emit('emitSubmit', 'cancel')
                    loading.value = false
                    comFlag.value = false
                })
                .catch(err=>{
                    loading.value = false
                    comFlag.value = false
                })
            break;
        }
    }else{
        isForce.value = false
        switch (form.value.actionActive) {
            case '兑换券':
                let data = {
                    memberTicketCode: form.value.code,
                    consumeCode: ls.get('TABLE_INFO').consumeCode,
                    memberCarCode: ticketInfo.value.MemberCarCode,
                    detail:comDetail.value,
                    roomCode:ls.get('TABLE_INFO').roomCode,
                    ip: ip.value,
                }
                loading.value = true
                Api.Common.PcObjProcess.Do({ "functionName": "UseGoodsTicket", "contentData": data })
                    .then(res => {
                        console.log('使用优惠券 res :>> ', res);
                        loading.value = false
                        ElNotification({
                            title: '提示',
                            message: '使用成功',
                            type: 'success',
                        })
                        emit('emitSubmit', 'cancel')
                        comFlag.value = false
                    })
                    .catch(() => {
                        loading.value = false
                        comFlag.value = false
                    })
                break;
        
            case '抖音券':
                let query = {
                    tiktopCode:form.value.code,
                    consumeCode:ls.get('TABLE_INFO').consumeCode,
                    roomCode:ls.get('TABLE_INFO').roomCode,
                    detail:comDetail.value,
                    "ip": ip.value
                }
                loading.value = true
                console.log(query);
                
                Api.Common.PcObjProcess.Do({ "functionName": "WriteOffTicket", "contentData": query })
                    .then(res => {
                        console.log('查询优惠券信息res :>> ', res);
                        // ticketInfo.value = res
                        ElNotification({
                            title: '提示',
                            message: '使用成功',
                            type: 'success',
                        })
                        emit('emitSubmit', 'cancel')
                        loading.value = false
                        comFlag.value = false
                    })
                    .catch(err=>{
                        loading.value = false
                        comFlag.value = false
                    })
                break;

            case '美团券':
            let mtquery = {
                receiptCode:form.value.code,
                consumeCode:ls.get('TABLE_INFO').consumeCode,
                roomCode:ls.get('TABLE_INFO').roomCode,
                detail:comDetail.value,
                "ip": ip.value
            }
            loading.value = true
            console.log(mtquery);
            
            Api.Common.PcObjProcess.Do({ "functionName": "MtWriteOffTicket", "contentData": mtquery })
                .then(res => {
                    console.log('查询优惠券信息res :>> ', res);
                    // ticketInfo.value = res
                    ElNotification({
                        title: '提示',
                        message: '使用成功',
                        type: 'success',
                    })
                    emit('emitSubmit', 'cancel')
                    loading.value = false
                    comFlag.value = false
                })
                .catch(err=>{
                    loading.value = false
                    comFlag.value = false
                })
            break;
        }
    }

    
  
   
}
// 取消
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}

const isForce = ref(false) // 是否是强制核销
const showForceHandle = ref(false)
const handTime = ref(3)
let handTimeInterval = null 
// 强制核销弹窗
const forceHandle = ()=>{
    showForceHandle.value = true
    handTime.value = 3
    handTimeInterval = setInterval(() => {
        handTime.value --
        if(handTime.value <= 0){
            clearInterval(handTimeInterval)
        }
    }, 1000);
    
}

// 执行强制核销
const confirmForce = ()=>{
    if(handTime.value > 0){
        return
    }
    isForce.value = true
    showForceHandle.value = false
    searchTicket()

}

// ------------------------------------------------------------- 选择套餐 ------------------------------------------------------------
const packGoodsShow = ref(false) // 选中套餐后打开套餐详情
const modalItemData = ref({})
const PackDetail = ref({})
const PackFlavor = ref('')
const indexStrV = ref(0)
const comSelectList = ref([])
const comSelectShow = ref(false) // 多个套餐时选择哪一个套餐
const comDetail = ref('') // 处理过的套餐
// 获取套餐单品口味
const flavorIndex = ref(0)

const packModalShow = (i) => {
    console.log(i)
    PackFlavor.value = ''
    packGoodsShow.value = true
    i.indexStr = indexStrV.value++
    i.priceList[0].detail.map(e => {
        e.allQty = 0
        console.log(e.goodsDetail);
        
        e.goodsDetail.map(s => {
            if(s.isEstmClear != '1'){
                e.allQty = e.allQty + Number(s.defaultQty)
            }
            if(s.isEstmClear == '1'){
                s.defaultQty = 0
            }
        })
    })
    console.log(i)
    i.priceList[0].detail.map(e => {
        e.goodsDetail.map(s => {
            if (typeof (s.goodsFlavor) != 'string') {
                s.goodsFlavor.map(v => {
                    v.flavorState = false
                })
            }
        })
    })
    modalItemData.value = i
    console.log(modalItemData.value.priceList[0].detail);
    modalItemData.value.priceList[0].detail.forEach(detail=>{
        detail.goodsDetail.forEach(detailV=>{
            let flavor = detailV.goodsFlavor
            if (flavor) {
                let newFlavor = ''
                if (typeof (flavor) == 'string') {
                    newFlavor = JSON.parse(flavor)
                } else {
                    newFlavor = flavor
                }
                newFlavor.map(e => {
                    if (e.flavorState == undefined) {
                        e.flavorState = false
                    }
                })
                console.log(newFlavor);
                newFlavor.forEach(item=>{
                    if(typeof item.FlavorStr == 'string'){
                                
                                const str = item.FlavorStr;
            
                                // 替换中文逗号为英文逗号
                                const normalizedStr = str.replace(/[，,]/g, ',');
                                // 使用英文逗号分隔字符串
                                const parts = normalizedStr.split(',');
                                // 将每个部分转换为对象
                                const result = parts.map(part => {
                                    // 默认值
                                    let uomName = part.trim();
                                    let addprice = 0;
                                    let select = false;
                                    // 检查是否有#，设置select
                                    if (uomName.includes('#')) {
                                        select = true;
                                        uomName = uomName.replace('#', '').trim();
                                    }
                                    // 检查是否有*，设置addprice
                                    const match = uomName.match(/\*(\d+)$/);
                                    if (match) {
                                        addprice = parseInt(match[1], 10);
                                        uomName = uomName.replace(match[0], '').trim();
                                    }
                                    return { uomName, addprice, select };
                                });
                                console.log(result);
                                
                                item.sizeList = result
                                
                    }
                })
                
                // PackFlavor.value = newFlavor
                detailV.goodsFlavor = newFlavor

                const result = newFlavor.map(vitem => {
                // 获取 sizeList 中 select 为 true 的 uomName 并拼接成字符串
                const flavor = vitem.sizeList
                    .filter(obj => obj.select)        // 过滤出 select 为 true 的对象
                    .map(obj => obj.uomName)          // 提取每个符合条件的 uomName
                    .join(',');                       // 使用 ',' 连接成一个字符串
                
                return flavor;                      // 直接返回拼接后的字符串
                });
                console.log(result);
                
                detailV.flavor = result.filter(obj => obj).join(',');
                console.log(detailV)
            }
        })
    })
    chosePack(modalItemData.value.priceList[0].detail[0].goodsDetail, '0')
}
// 选择套餐
const PackIndex = ref(0)
const operType = ref('')
const chosePack = (detail, index) => {
    console.log(detail);
    console.log(modalItemData.value.priceList[0].detail);
    modalItemData.value.priceList[0].detail.forEach(item=>{
        item.goodsDetail.map(v=>{
            v.choiceType = item.choiceType
            v.isSelect = false
            v.operType = item.operType
        })
    })
    operType.value = modalItemData.value.priceList[0].detail[index].operType
    // let choiceType  = modalItemData.value.priceList[0].detail[index].choiceType
    PackIndex.value = index
    // return
    flavorIndex.value = 0
    PackDetail.value = detail
    // PackDetail.value.map(item=>{
    //     item.choiceType = choiceType
    //     item.isSelect = false
    //     item.operType = operType.value
    // })
    console.log(detail);
    
    // getPackFlavorS(detail[0].goodsFlavor, '0')
  
}

const comFlag = ref(false)
// 套餐提交
const packAllSub = (itemS) => {
    if(comFlag.value){
        showToast("加载中");
        return
    }
    comFlag.value = true
    console.log(itemS);
    let item = []
    itemS.map(e => {
        e.goodsDetail.map(s => {
            item.push(s)
        })
    })
    console.log(item);
    
    item.forEach(v=>{
        if(v.choiceType == '1' && !v.isSelect && v.operType =='0'){
                v.defaultQty = 0
        }
    })
    
    let allQty = modalItemData.value.priceList[0].detail[PackIndex.value].allQty
    let maxQty = modalItemData.value.priceList[0].detail[PackIndex.value].maxQty
    modalItemData.value.count = '1'
        item.map(e => {
            e.flavors = e.flavor
            // e.flavors = []
            // if (typeof (e.goodsFlavor) != 'string') {
            //     e.goodsFlavor.map(s => {
            //         if (s.flavorState == true) {
            //             e.flavors.push(s.Name)
            //         }
            //     })
            // }
        })
        let modalItemDataS = JSON.parse(JSON.stringify(modalItemData.value))
        modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail = []

        let packPrice = modalItemData.value.salePrice // 获取套餐的销售价格
        let vipPackPrice = modalItemData.value.vipPrice // 获取套餐的vip价格
        let a = []
        let tots = 0
        item.map((e, i) => {
            let b = {
                unit: e.salePrice,
                tot: e.salePrice * e.defaultQty
            }
            a.push(b)
            tots += b.tot
            if (e.defaultQty > 0) {
                modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail.push(e)
            }
        })
        let c = []
        let d = []
        a.map(e => {
            c.push(packPrice * (e.tot / tots))
            d.push(vipPackPrice * (e.tot / tots))
        })
        item = item.filter(v => v.defaultQty > 0);
        let percentPriceTemp = 0
        let vipPercentPriceTemp = 0
        for (let i = 0; i < item.length; i++) {
            item[i].percentPrice = parseInt(c[i])
            item[i].vipPercentPrice = parseInt(d[i])
            percentPriceTemp += item[i].percentPrice
            vipPercentPriceTemp += item[i].vipPercentPrice
        }
        item[item.length - 1].percentPrice += (packPrice - percentPriceTemp)
        item[item.length - 1].vipPercentPrice += (vipPackPrice - vipPercentPriceTemp)
        // return
        let goodsDetail = modalItemDataS.priceList[0].detail[PackIndex.value].goodsDetail
        let arr = []
        goodsDetail.forEach(item=>{
            item.itemType = '3'
            item.saleQty = item.defaultQty
            arr.push(item)
        })
        modalItemDataS.priceList[0].itemType = '2'
        modalItemDataS.priceList[0].saleQty = 1
        delete modalItemDataS.priceList[0].detail;
        arr.push(modalItemDataS.priceList[0])
        arr.reverse();
        // modalItemDataS.priceList[0].detail = goodsDetail
        comDetail.value = arr
        console.log(comDetail.value);
        console.log(modalItemDataS);
       
        // menuGoodsList.value.unshift(JSON.parse(JSON.stringify(modalItemDataS)))
        // console.log(menuGoodsList.value);
        
        // return
        handleSubmit()
        packGoodsShow.value = false
}


// const sumibtDy = ()=> {
//         searchTicket()
// }

</script>

<style scoped lang="scss">
.dialog-box {
    ::v-deep {
        .el-dialog {
            padding: 0;
            border-radius: 8px;
            width: 1000px;
        }
    }
}

.header-box {
    height: 60px;
    background: #E6E6E6;
    border-radius: 8px 8px 0px 0px;
    font-weight: bold;
    font-size: 24px;
    color: #212121;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.content-box {
    // width: 1000px;
    display: flex;
    padding-top: 10px;

    .content-left-box {
        width: 50%;
        // background: #FF6A00;
        // padding-left: 40px;
        padding: 0px 30px;

        .action {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            // padding: 10px 0px 0px;
            margin-bottom: 30px;

            .action-item {
                // width: 208px;
                // flex: calc(25% - 16px);
                /* 计算每个子元素的宽度，减去 margin */
                height: 48px;
                line-height: 48px;
                width: 128px;
                text-align: center;
                background: #E6E6E6;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #666666;
                // margin-right: 18px;
                cursor: pointer;

                &.active {
                    background: #FFE566;
                    color: #212121;
                }

                &.disabled {
                    background: #F2F2F2;
                    border-radius: 8px;
                    color: #CCCCCC;
                }

                &.none {
                    background: #FFFFFF;
                }
            }
        }

        .form-box {
            ::v-deep {
                .el-input__wrapper {
                    background: #F9F9F9;
                    border-radius: 8px;
                    border: 0;
                    font-size: 16px;
                    color: #999999;
                }
            }

            .qrcode-img {
                width: 24px;
                height: 24px;
                position: absolute;
                right: 10px;
                cursor: pointer;
            }
        }
    }

    .content-right-box {
        width: 50%;
        padding: 0 40px;

        .use-ticket-box {
            margin-top: 20px;
            // width: 420px;
            height: 400px;
            border-radius: 8px;
            border: 1px solid #999999;
            padding: 20px 20px 0px;
            overflow-y: auto;

            .ticket-name {
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 20px;
                color: #212121;
                text-align: center;
            }

            .ticket-info {
                margin-top: 20px;
                display: flex;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #212121;

                .ticket-label {
                    width: 100px;
                    text-align: right;
                }

                .ticket-value {
                    .ware {
                        margin-top: 10px;
                    }

                    :first-child {
                        margin-top: 0px;
                    }
                }
            }
        }
    }
}



.footer-box {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    padding: 0px 20px 20px 20px;
    position: relative;
    .cancel {
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        font-size: 24px;
        color: #FF6A00;
    }

    .submit {
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        font-size: 24px;
        color: #FFFFFF;
        margin-left: 30px;
        &.force{
            position: absolute;
            right: 10px;
        }
    }
}
.popup-block {
    ::v-deep{
        .el-dialog{
            width: 500px;
        }
    }
    .cancel {
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        font-size: 24px;
        color: #FF6A00;
    }

    .submit {
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        font-size: 24px;
        color: #FFFFFF;
        margin-left: 30px;
    }
    .popup-title{
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 20px;
        color: #212121;
        padding-left: 30px;
    }
    .popup-block-handle{
        font-family: Source Han Sans CN;
        // font-weight: bold;
        font-size: 20px;
        color: #212121;
        line-height: 20px;
        text-align: center;
        padding: 20px 0;
    }
  .popup-block-main {
    padding: 20px 80px 10px ;
    .main-item{
      height: 60px;
      line-height: 60px;
      background: #FFFFFF;
      border-radius: 8px;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #FF6A00;
      margin-bottom: 10px;
      text-align: center;
      border: 1px solid #FF6A00;
      cursor: pointer;
      &.select{
        background: #FF6A00;
        color: #FFFFFF;
        border: 1px solid #FFDD99;
      }
    }
  }
  .popup-block-footer {
    padding: 10px 24px 20px 24px;
    .button-group {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .canot{
        background: #cccccc;
        
      }
    }
  }
}

.sumibt-kxj {
    cursor: pointer;
    height: 40px;width: 80px;background-color: #ffe566;text-align: center;line-height: 40px;border-radius:6px ;color: #212121;
}
.force-dialog{
    padding-top: 100px;
}

</style>
